<template>
  <div>
    <h1>二维码 IRQ Code 生成器</h1>
    <div>
      <label for="businessId">业务编号:</label>
      <input type="text" id="businessId" v-model="businessId" />
    </div>
    <div>
      <label for="userId">用户 ID:</label>
      <input type="text" id="userId" v-model="userId" />
    </div>
    <div>
      <label for="timestamp">时间戳 (可选):</label>
      <input type="text" id="timestamp" v-model="timestamp" />
    </div>
    <button @click="generateIrqCodeAndQr">生成二维码</button>
    <div v-if="qrCodeUrl">
      <img :src="qrCodeUrl" alt="IRQ Code 二维码" />
      <p>IRQ Code: {{ irqCode }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import QRCode from 'qrcode-generator';

// 定义可配置的参数
const businessId = ref('');
const userId = ref('');
const timestamp = ref('');
const irqCode = ref('');
const qrCodeUrl = ref('');

const generateIrqCode = () => {
  let currentTimestamp = timestamp.value;
  if (!currentTimestamp) {
    const now = new Date();
    currentTimestamp = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`;
  }
  // 生成 IRQ Code
  irqCode.value = `IRQ-${businessId.value}-${userId.value}-${currentTimestamp}`;
};

const generateQrCode = () => {
  const qr = QRCode(0, 'L');
  qr.addData(irqCode.value);
  qr.make();
  // 将二维码转换为 SVG 格式
  const svg = qr.createSvgTag({ cellColor: '#000000' });
  const svgBlob = new Blob([svg], { type: 'image/svg+xml' });
  qrCodeUrl.value = URL.createObjectURL(svgBlob);
};

const generateIrqCodeAndQr = () => {
  generateIrqCode();
  generateQrCode();
};
</script>

<style scoped>
label {
  display: inline-block;
  width: 100px;
  margin-bottom: 5px;
}

input {
  margin-bottom: 10px;
}

button {
  margin-top: 10px;
}
</style>